<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<%@ include file="common/head.jsp"%>

<body class="fix-header fix-sidebar">

	<!-- Preloader - style you can find in spinners.css -->
	<div class="preloader">
		<svg class="circular" viewBox="25 25 50 50">
				<circle class="path" cx="50" cy="50" r="20" fill="none"
				stroke-width="2" stroke-miterlimit="10" /> </svg>
	</div>
	<!-- Main wrapper  -->
	<div id="main-wrapper">
		<!-- header header  -->
		<%@ include file="common/header.jsp"%>
		<!-- End header header -->
		<!-- Left Sidebar  -->
		<%@ include file="common/nav.jsp"%>
		<!-- End Left Sidebar  -->
		<!-- Page wrapper  -->
		<div class="page-wrapper">
			<!-- 锐高软件 -->
			<%@ include file="../common/ruigao.jsp"%>

			<!--
                    	作者：offline
                    	时间：2018-03-26
                    	描述：折线图信息展示
                    -->
			<div class="container-fluid">

				<div class="row">

					<div class="col-lg-12">
						<div class="card">
							<div class="card-body">
								<div class="card-content">
									<!-- Left sidebar -->
									<div class="inbox-leftbar">

										<a href="${pageContext.request.contextPath}/index.jsp"
											class="btn btn-danger btn-block waves-effect waves-light">
											<font style="vertical-align: inherit;"> <font
												style="vertical-align: inherit;">返回首页</font>
										</font>
										</a>
									</div>
									<!-- End Left sidebar -->
									<div class="inbox-rightbar">
										<div role="toolbar">

											<div class="btn-group">
												<input type="month" class="btn btn-light waves-effect date" name="val-date" placeholder="yyyy-mm">
												
											</div>
										</div>

									</div>
								</div>
							</div>
							<div class="card-title">
								<p style="text-align: center;">
									<label class="month_title"></label>考勤情况
								</p>
							</div>
							<div class="card-content">
								<div id="b-line"
									style="height: 370px; -webkit-tap-highlight-color: transparent; user-select: none; position: relative; background: transparent;"
									_echarts_instance_="ec_1522633644067">
									<div
										style="position: relative; overflow: hidden; width: 452px; height: 370px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
										<canvas width="452" height="370" data-zr-dom-id="zr_0"
											style="position: absolute; left: 0px; top: 0px; width: 452px; height: 370px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
									</div>
									<div
										style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font-style: normal; font-variant: normal; font-weight: normal; font-stretch: normal; font-size: 14px; font-family: &amp; amp; quot; Microsoft YaHei&amp;amp; quot;; line-height: 21px; padding: 5px; left: 319px; top: 100px;">
										Wed<br> <span
											style="display: inline-block; margin-right: 5px; border-radius: 10px; width: 9px; height: 9px; background-color: #eac459;"></span>Min:
										3
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>
	</div>
	<!-- End Container fluid  -->
	<!-- footer -->
	<%@ include file="common/footer.jsp"%>
	<!-- End footer -->
	<!-- End Page wrapper  -->
	<%@ include file="common/js.jsp"%>
	
	<script type="text/javascript">
		$(".date").change(function() {
			var dates = $(this).val();
			$(".month_title").text(dates);
			init(dates);
		})
	
		var echartData = "";
		var date = new Date();
		var month = (date.getMonth() + 1).toString();
		if(month.length == 1){
			month = "0"+month;
		}
		$(function() {
			init();
			$(".date").val(date.getFullYear()+"-"+month);
			$(".month_title").text(date.getFullYear()+"-"+month);
		}) 
		
		function init(dates) {
			var userId = ${userid};
			var yM = date.getFullYear()+"-"+month;
			if(dates != null){
				yM = dates;
			}
			$.ajax({
				url : "userStatistics",
				type : "GET",
				data : {
					userId : userId,
					yM : yM
				},
				dataType : "json",
				success : function(data) {
					var echartData = data;
					
					initEcharts(echartData);
					  
				},
				error : function(data) {
					alert("失败");
				}
			})
		}
	</script>
</body>

</html>